<template>
  <el-container class="panel-block">
    <el-header class="sa-header">
      <div class="sa-title sa-flex sa-row-between">
        <div class="label sa-flex">
          <span class="left">直播间管理</span>
        </div>
        <div>
          <el-popover placement="bottom" :width="174" trigger="click">
            <template #reference>
              <el-button class="sa-button-refresh">主播端</el-button>
            </template>
            <img class="live-qrcode" src="/static/images/wechatMplive/live-qrcode.png" />
          </el-popover>

          <el-button
            v-auth="'shop.admin.app.mplive.room.sync'"
            class="sa-button-refresh"
            icon="RefreshRight"
            @click="sync"
            :loading="loading"
            >同步直播间</el-button
          >
          <el-button
            v-auth="'shop.admin.app.mplive.room.add'"
            class="sa-button-refresh"
            type="primary"
            icon="Plus"
            @click="addRow"
            >创建直播间</el-button
          >
        </div>
      </div>
    </el-header>
    <el-main class="sa-p-0" v-loading="loading">
      <el-table height="100%" class="sa-table" :data="live.data" stripe @sort-change="fieldFilter">
        <template #empty>
          <sa-empty />
        </template>
        <el-table-column label="房间ID" min-width="120" align="center" sortable="custom">
          <template #default="scope">
            <div class="sa-table-line-1">{{ scope.row.roomid }}</div>
          </template>
        </el-table-column>
        <el-table-column label="直播类型" min-width="120" align="center">
          <template #default="scope">
            <div class="sa-table-line-1">{{ scope.row.type_text }}</div>
          </template>
        </el-table-column>
        <el-table-column label="直播间标题" min-width="200" align="center">
          <template #default="scope">
            <div class="sa-table-line-1">{{ scope.row.name }}</div>
          </template>
        </el-table-column>
        <el-table-column label="主播昵称" min-width="120" align="center">
          <template #default="scope">
            <div class="sa-table-line-1">{{ scope.row.anchor_name }}</div>
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="120" align="center">
          <template #default="scope">
            <div
              class="sa-table-line-1"
              :class="
                scope.row.status === 101
                  ? 'sa-color--success'
                  : scope.row.status === 102
                  ? 'sa-color--warning'
                  : scope.row.status === 105
                  ? 'sa-color--info'
                  : 'sa-color--danger'
              "
              >{{ scope.row.status_text }}</div
            >
          </template>
        </el-table-column>
        <el-table-column label="背景图" min-width="80" align="center">
          <template #default="scope">
            <div class="sa-flex sa-row-center">
              <sa-preview :url="scope.row.cover_img" size="30"></sa-preview>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="分享图" min-width="80" align="center">
          <template #default="scope">
            <div class="sa-flex sa-row-center">
              <sa-preview :url="scope.row.share_img" size="30"></sa-preview>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="封面图" min-width="80" align="center">
          <template #default="scope">
            <div class="sa-flex sa-row-center">
              <sa-preview :url="scope.row.feeds_img" size="30"></sa-preview>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="开播时间" min-width="200" align="center">
          <template #default="scope">
            <div class="sa-table-line-1">{{
              dayjs(scope.row.start_time * 1000).format('YYYY-MM-DD HH:mm')
            }}</div>
          </template>
        </el-table-column>
        <el-table-column label="结束时间" min-width="200" align="center">
          <template #default="scope">
            <div class="sa-table-line-1">{{
              dayjs(scope.row.end_time * 1000).format('YYYY-MM-DD HH:mm')
            }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="340" fixed="right" align="center">
          <template #default="scope">
            <el-button
              v-auth="'shop.admin.app.mplive.room.detail'"
              class="is-link"
              type="primary"
              @click="editRow(scope.row.roomid)"
              >编辑</el-button
            >
            <el-button
              v-auth="'shop.admin.app.mplive.room.pushUrl'"
              class="is-link"
              type="primary"
              @click="pushUrl(scope.row.roomid)"
              v-if="scope.row.type === 1 && (scope.row.status === 101 || scope.row.status === 102)"
              >推流地址</el-button
            >
            <el-button
              v-auth="'shop.admin.app.mplive.room.qrcode'"
              class="is-link"
              type="primary"
              @click="shareQrcode(scope.row.roomid)"
              v-if="scope.row.status === 101 || scope.row.status === 102"
              >分享二维码</el-button
            >
            <el-button
              v-auth="'shop.admin.app.mplive.room.playback'"
              class="is-link"
              type="primary"
              @click="playBack(scope.row.roomid)"
              v-if="scope.row.status === 103"
              >回放</el-button
            >
            <el-popconfirm
              width="fit-content"
              confirm-button-text="确认"
              cancel-button-text="取消"
              title="确认删除这条记录?"
              @confirm="deleteApi(scope.row.roomid)"
            >
              <template #reference>
                <el-button
                  v-auth="'shop.admin.app.mplive.room.delete'"
                  class="is-link"
                  type="danger"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>
<script>
  export default {
    name: 'shop.admin.mplive.room',
  };
</script>
<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import { api } from '../../app.service';
  import liveEdit from './edit.vue';
  import PushUrl from './pushUrl.vue';
  import ShareQrcode from './qrcode.vue';
  import dayjs from 'dayjs';
  import { useModal } from '@/sheep/hooks';
  import PlayBack from './playback.vue';

  const loading = ref(true);

  // 直播间表格
  const live = reactive({
    data: [],
    order: '',
    sort: '',
    selected: [],
  });
  // 获取直播间数据
  async function getLiveData() {
    loading.value = true;
    const { error, data } = await api.mplive.room.list({
      order: live.order,
      sort: live.sort,
    });
    if (error === 0) {
      live.data = data;
    }
    loading.value = false;
  }

  // table 字段排序
  function fieldFilter({ prop, order }) {
    live.order = order == 'ascending' ? 'asc' : 'desc';
    live.sort = prop;
    getLiveData();
  }

  //添加直播间
  function addRow() {
    useModal(
      liveEdit,
      {
        title: '添加直播间',
        type: 'add',
      },
      {
        confirm: () => {
          getLiveData();
        },
      },
    );
  }
  //编辑直播间
  function editRow(id) {
    useModal(
      liveEdit,
      {
        title: '编辑直播间',
        type: 'edit',
        id: id,
      },
      {
        confirm: () => {
          getLiveData();
        },
      },
    );
  }
  // 删除直播间
  async function deleteApi(id) {
    loading.value = true;
    await api.mplive.room.delete(id);
    loading.value = false;
    getLiveData();
  }
  //推流地址
  async function pushUrl(id) {
    useModal(
      PushUrl,
      {
        title: '推流地址',
        id: id,
      },
      {
        confirm: () => {
          getLiveData();
        },
      },
    );
  }

  //分享二维码
  async function shareQrcode(id) {
    useModal(
      ShareQrcode,
      {
        title: '分享二维码',
        id: id,
      },
      {
        confirm: () => {
          getLiveData();
        },
      },
    );
  }

  //同步直播间
  async function sync() {
    loading.value = true;
    const { error, data } = await api.mplive.room.sync();
    if (error === 0) {
      getLiveData();
    }
    loading.value = false;
  }
  //直播回放
  async function playBack(id) {
    useModal(
      PlayBack,
      {
        title: '直播回放列表',
        id: id,
      },
      {
        confirm: () => {
          getLiveData();
        },
      },
    );
  }

  onMounted(() => {
    getLiveData();
  });
</script>
<style lang="scss" scoped>
  .price-title {
    text-decoration: line-through;
    margin-right: 8px;
    color: var(--sa-subfont);
  }

  .live-qrcode {
    width: 144px;
    height: 144px;
  }
</style>
